<template>
  <div class="container circle-wrapper">
    <div class="circle-content">
      <div class="circle-content__header">
        <circle-textarea
          showUpload
          type="textarea"
          placeholder="发布一条动态吧～"
          btn-text="发布"
          :max-length="800"
          @click="handleCircleSubmit($event, null, 1)"
        ></circle-textarea>
      </div>
      <div class="circle-content__body">
        <el-tabs v-model="activeName" @tab-click="handleTabChange">
          <el-tab-pane
            v-for="page in mainList"
            :key="page.type"
            :label="page.name"
            :name="page.type"
          >
            <circle-list v-if="!page.loading" :list="page.list" class="circle-list">
              <template slot-scope="scope">
                <circle-item
                  v-for="item in scope.list"
                  :key="item.id"
                  :datas="item"
                  showDelete
                  :showFollow="page.type != 3"
                  showShare
                  :contentLength="162"
                  @onForward="openCircleForward"
                  @onDelete="handleDeleteCircle"
                  @onLike="handleLikeCircle($event, 1)"
                >
                  <div class="reply-main">
                    <circle-textarea
                      showUpload
                      type="textarea"
                      placeholder="发表你的评论吧～"
                      btn-text="发表"
                      :max-length="200"
                      @click="handleCircleSubmit($event, item, 2)"
                    ></circle-textarea>
                    <circle-list
                      v-if="item.list.length > 0"
                      :list="item.list"
                      :max-length="3"
                      :total-length="item.list.length"
                      show-more
                      class="reply-main__list"
                    >
                      <template slot-scope="scope">
                        <circle-item
                          v-for="data in scope.list"
                          :key="data.id"
                          :datas="data"
                          showReplyDelete
                          :contentLength="162"
                          @onLike="handleLikeCircle($event, 2)"
                          @onDeleteReply="handleDeleteReply($event, data)"
                        >
                          <div v-if="getUserInfo.id != data.user_id" class="reply-user">
                            <circle-textarea
                              placeholder="发表你的评论吧～"
                              btn-text="发表"
                              :max-length="200"
                              @click="handleCircleSubmit($event, data, 3)"
                            ></circle-textarea>
                          </div>
                        </circle-item>
                      </template>
                    </circle-list>
                  </div>
                </circle-item>
              </template>
            </circle-list>

            <template v-if="Number(page.type) == 3">
              <template v-if="isLogin">
                <div
                  v-if="page.loading"
                  v-loading="page.loading"
                  element-loading-text="加载中..."
                  class="circle-loading"
                ></div>
                <edu-no-data v-if="!page.loading && page.list.length == 0"></edu-no-data>
              </template>
              <div v-else class="circle-login">
                <div class="text">登录使用更多功能~</div>
                <el-button type="primary" @click="goLogin">去登录</el-button>
              </div>
            </template>
            <template v-else>
              <div
                v-if="page.loading"
                v-loading="page.loading"
                element-loading-text="加载中..."
                class="circle-loading"
              ></div>
              <edu-no-data v-if="!page.loading && page.list.length == 0"></edu-no-data>
            </template>

            <el-pagination
              v-if="!page.loading"
              :current-page.sync="page.num"
              :page-size="page.size"
              :hide-on-single-page="true"
              layout="prev, pager, next, jumper"
              :total="page.total"
              class="pagination-list"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="circle-sidebar">
      <div class="circle-sidebar__info">
        <edu-avatar
          :size="100"
          :src="userBasicData.avatar_url"
          :show-level="$util.isDef(getUserInfo.is_vip) && getUserInfo.is_vip == 1"
          :level-icon-size="30"
          :cursor="$util.isDef(getUserInfo.id) ? 'pointer' : 'default'"
          @click="goUser()"
        ></edu-avatar>
        <div v-if="isLogin" class="name" @click="goUser()">
          {{ userBasicData.nick_name || userBasicData.title || '' }}
        </div>
        <div v-if="isLogin" class="content">{{ userBasicData.signature || '' }}</div>
        <div v-else class="content">登录使用更多功能~</div>
        <el-button v-if="!isLogin" class="btn" type="primary" @click="goLogin">去登录</el-button>
      </div>
      <div class="circle-sidebar__parallel" v-if="isLogin && !loading">
        <div class="item" @click="goUser('5')">
          <div class="title">关注</div>
          <div class="number">{{ userBasicData.following_num }}</div>
        </div>
        <div class="line"></div>
        <div class="item" @click="goUser('6')">
          <div class="title">粉丝</div>
          <div class="number">{{ userBasicData.fans_num }}</div>
        </div>
        <div class="line"></div>
        <div class="item" @click="goUser()">
          <div class="title">最近访客</div>
          <div class="number">{{ userBasicData.recent_visitor_num }}</div>
        </div>
      </div>
    </div>

    <!-- 转发圈子 -->
    <circle-forward
      ref="refCircleForward"
      :visible.sync="forwardVisible"
      @update="updateCircleList"
    ></circle-forward>
  </div>
</template>

<script>
import circleList from './components/circle-list'
import circleItem from './components/circle-item'
import circleTextarea from './components/circle-textarea'
import circleForward from './components/circle-forward'
import EduNoData from '@/components/EduNoData'
import { mapGetters } from 'vuex'
export default {
  components: {
    circleList,
    circleItem,
    circleTextarea,
    circleForward,
    EduNoData
  },
  data() {
    return {
      loading: true,
      userBasicData: {
        id: 0,
        nick_name: '',
        avatar_url: '',
        signature: ''
      },
      circleList: [],
      activeName: '2',
      mainList: [
        { name: '推荐', type: '1', num: 1, size: 12, total: 0, loading: true, list: [] },
        { name: '广场', type: '2', num: 1, size: 12, total: 0, loading: true, list: [] },
        { name: '关注', type: '3', num: 1, size: 12, total: 0, loading: true, list: [] }
      ],
      forwardVisible: false // 转发弹窗
    }
  },
  computed: {
    ...mapGetters({
      getUserInfo: 'user/accountInfo',
      isLogin: 'user/isLogin'
    })
  },
  methods: {
    // 用户基础信息
    getUserDataInit() {
      setTimeout(() => {
        this.$api.getUserHomeInfo(
          {
            user_id: this.getUserInfo.id
          },
          res => {
            this.userBasicData = res.data
            setTimeout(() => {
              this.loading = false
            }, 300)
          }
        )
      }, 300)
    },
    // 获取列表数据
    getCircleList(page) {
      this.mainList.forEach(item => {
        if (item.type == page.type) {
          this.$api.getCircleList(
            page,
            res => {
              const { data } = res
              if (page.page == 1) item.list = []
              item.list = data.data.map(clild => {
                clild.list = []
                return clild
              })
              item.num = page.page
              item.total = data.total
              setTimeout(() => {
                item.loading = false
              }, 200)
            },
            _ => {
              setTimeout(() => {
                item.loading = false
              }, 200)
            }
          )
        }
      })
    },
    // 更新圈子列表
    updateCircleList() {
      this.mainList.forEach(item => {
        if (item.type == this.activeName) {
          item.loading = true
          this.getCircleList({
            type: Number(item.type),
            page: 1,
            count: item.size
          })
        }
      })
    },
    // 分页
    handleCurrentChange(val) {
      window.scrollTo(0, 0)
      let page = this.mainList.find(item => item.type == this.activeName)
      if (page) {
        this.getCircleList({
          type: Number(page.type),
          page: val,
          count: page.size
        })
      }
    },
    // tab
    handleTabChange() {
      let page = this.mainList.find(item => item.type == this.activeName)
      if (page && page.loading) {
        this.getCircleList({
          type: Number(page.type),
          page: page.num,
          count: page.size
        })
      }
    },
    // 发布/评论/回复
    handleCircleSubmit(val, item, type) {
      let query = {
        content: val.content
      }
      if (!this.$util.isEmpty(val.attach)) {
        query = {
          ...query,
          attach: String(val.attach)
        }
      }
      if (type == 1) {
        // 发布
        this.$api.createCircle(
          query,
          res => {
            this.$message.success(res.msg)
            this.updateCircleList()
          },
          err => {
            this.$message.error(err.msg)
          }
        )
      } else {
        if (type == 2) {
          // 评论
          query = {
            ...query,
            circle_id: item.id
          }
        } else {
          // 回复
          query = {
            ...query,
            circle_id: item.circle_id,
            comment_id: item.id,
            reply_user_id: item.user_id
          }
        }
        this.$api.createCircleComment(
          query,
          res => {
            this.$message.success(res.msg, res => {
              this.updateCircleCommentList(query.circle_id)
            })
          },
          err => {
            this.$message.error(err.msg)
          }
        )
      }
    },
    // 获取圈子回复列表数据
    updateCircleCommentList(id) {
      this.$api.getCircle(
        {
          circle_id: id,
          page: 1,
          count: 100
        },
        res => {
          this.mainList.forEach(item => {
            if (item.type == this.activeName) {
              item.list.forEach(page => {
                page.comment_num = res.data.comment.data.length
                page.list = res.data.comment.data
              })
            }
          })
        }
      )
    },
    // 打开转发圈子弹窗
    openCircleForward(id) {
      this.forwardVisible = true
      this.$refs.refCircleForward.getForwardData(id)
    },
    // 删除圈子
    handleDeleteCircle(id) {
      this.$messageBox
        .confirm('确定删除该动态吗？', {
          center: true,
          type: '',
          showClose: true
        })
        .then(() => {
          this.$api.deleteCircle(
            {
              id
            },
            res => {
              this.$message.success(res.msg)
              this.updateCircleList()
            },
            err => {
              this.$message.error(err.msg)
            }
          )
        })
        .catch(() => {})
    },
    // 删除回复
    handleDeleteReply(id, item) {
      this.$messageBox
        .confirm('确定删除该回复吗？', {
          center: true,
          type: '',
          showClose: true
        })
        .then(() => {
          this.$api.deleteCircleComment(
            {
              id
            },
            res => {
              this.$message.success(res.msg, res => {
                this.updateCircleCommentList(item.circle_id)
              })
            },
            err => {
              this.$message.error(err.msg)
            }
          )
        })
        .catch(() => {})
    },
    // 处理圈子/评论点赞
    handleLikeCircle(value, type) {
      this.$api.createCircleLike(
        {
          ...value,
          type
        },
        res => {
          this.$message.success(res.msg)
        }
      )
    },
    // 去个人主页
    goUser(type) {
      let id = this.userBasicData.identity == 2 ? this.userBasicData.user_id : this.userBasicData.id
      if (this.$util.isDef(id)) {
        let query = {
          id
        }
        if (this.$util.isDef(type)) {
          query = {
            ...query,
            type
          }
        }
        this.$router.push({
          path: '/user',
          query
        })
      }
    },
    // 去登录
    goLogin() {
      this.$globalToLogin(() => {})
    }
  },
  mounted() {
    if (this.isLogin) {
      this.getUserDataInit()
    }
    this.handleTabChange()
  }
}
</script>

<style lang="scss" scoped>
.circle-wrapper {
  margin-top: 15px;
  display: flex;
  align-items: flex-start;
  .circle-content {
    flex: 1;
    min-width: 0;
    &__header {
      padding: 20px;
      background: #ffffff;
    }
    &__body {
      margin-top: 14px;
      padding-bottom: 50px;
      background: #ffffff;
      ::v-deep .el-tabs__nav-wrap {
        padding-left: 30px;
        .el-tabs__item {
          height: 44px;
          line-height: 44px;
        }
        &::after {
          height: 1px;
          background-color: #f7f7f7;
        }
      }
      .circle-list {
        padding: 0 20px;
        margin-top: 30px;
        .reply-main {
          margin-top: 20px;
          &__list {
            padding: 15px 20px;
            margin-top: 20px;
            background: #f7f7f7;
          }
        }
        .reply-user {
          margin-top: 10px;
        }
      }
      .circle-loading {
        height: 300px;
      }
      .circle-login {
        height: 300px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        .text {
          margin-bottom: 20px;
          font-size: 13px;
          font-weight: 400;
          color: $text-color-auxiliary;
          line-height: 20px;
        }
      }
      .pagination-list {
        margin-top: 50px;
        display: flex;
        justify-content: center;
      }
    }
  }

  .circle-sidebar {
    margin-left: 14px;
    width: 366px;
    background: #ffffff;
    &__info {
      height: 366px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .name {
        margin-top: 20px;
        font-size: 15px;
        font-weight: bold;
        color: #303133;
        line-height: 23px;
        cursor: pointer;
      }
      .content {
        margin-top: 20px;
        font-size: 13px;
        font-weight: 400;
        color: $text-color-auxiliary;
        line-height: 20px;
      }
      .btn {
        margin-top: 30px;
      }
    }
    &__parallel {
      height: 80px;
      display: flex;
      align-items: center;
      @include edu-color-primary(background);
      .item {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        .title {
          font-size: 13px;
          font-weight: 400;
          color: #ffffff;
          line-height: 20px;
        }
        .number {
          margin-top: 10px;
          font-size: 20px;
          font-weight: bold;
          color: #ffffff;
          line-height: 30px;
        }
      }
      .line {
        width: 1px;
        height: 20px;
        opacity: 0.3;
        background: #ffffff;
      }
    }
  }
}
</style>
